<template>
  <h1>count: {{ $store.state.count }}</h1>
  <button @click="add">count++</button>
  <h1>{{ $store.getters.reverseMsg }}</h1>
  <h1>上面字符串长度为:{{ $store.getters.reverseMsgLength }}</h1>
  <input type="text" v-model.lazy="msg" />
  <h2>{{ msg }}</h2>
  <hr />
  <input type="checkbox" v-model="blooen" value="苹果" />苹果
  <input type="checkbox" v-model="blooen" value="栗子" />栗子
  <input type="checkbox" v-model="blooen" value="火龙果" />火龙果
  <input type="checkbox" v-model="blooen" value="香蕉" />香蕉
  <input type="checkbox" v-model="blooen" value="荔枝" />荔枝
  <input type="checkbox" v-model="blooen" value="西瓜" />西瓜
  <h2>我喜欢的水果:{{ blooen }}</h2>
  <hr />
  <input type="radio" value="男" v-model="sex" />男
  <input type="radio" value="女" v-model="sex" />女
  <h2>{{ sex }}</h2>
  <hr />
  <select name="" id="" v-model="city">
    <option value="西安">西安</option>
    <option value="咸阳">咸阳</option>
    <option value="玉林">玉林</option>
    <option value="蓝田">蓝田</option>
    <option value="商洛">商洛</option>
  </select>
  <h2>{{ city }}</h2>
  <hr />
  <select name="" id="" v-model="citys" multiple>
    <option value="西安">西安</option>
    <option value="咸阳">咸阳</option>
    <option value="玉林">玉林</option>
    <option value="蓝田">蓝田</option>
    <option value="商洛">商洛</option>
  </select>
  <h2>{{ citys }}</h2>
  <div v-for="item in $store.state.msgList">
    <h5>{{ item.title }}</h5>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import { useStore } from "vuex";
export default {
  setup() {
    let store = useStore();
    const msg = ref("helloword");
    const blooen = ref([]);
    const sex = ref("男");
    const city = ref("咸阳");
    const citys = ref([]);
    const add = () => {
      store.commit("add");
    };
    store.dispatch("getAxios", "hhh");
    return { blooen, sex, city, citys, msg, add };
  },
};
</script>

<style>
</style>